<template>
  <el-row class="container flex-column">
    <el-row class="flex-max pr">
      <el-table :data="tableData" height="100%" class="pa-fill">
        <el-table-column prop="dateTime" label="创建时间" width="200" />
        <el-table-column prop="ipv4" label="ipv4" width="160" />
        <el-table-column prop="ipAddress" label="所在地区" width="200" />
        <el-table-column prop="url" label="请求地址" min-width="500" class-name="f12" />

        <template #empty>
          <el-empty description="无数据" />
        </template>
      </el-table>
    </el-row>

    <el-row class="container-page center-vertical p-lr-10">
      <el-pagination
          v-model:current-page="page"
          v-model:page-size="limit"
          :total="total"
          layout="sizes, prev, pager, next, total"
          :page-sizes="[10, 20, 30, 50]"
          @size-change="tableSelect"
          @current-change="chagePage"/>
    </el-row>
  </el-row>
</template>

<script lang="ts" setup>
import {inject, onMounted, ref} from "vue"
import {timestampToDateString} from "@/core/util/date_util";

const $api = inject('$api')
const $post = inject('$post')
const page = ref(0)
const limit = ref(20)
const total = ref(0)
const tableData = ref([])

onMounted(()=>{
  getData()
})

function getData(){
  $post($api.systemOnline,{
    "page": page.value + 1,
    "limit": limit.value,
  }).then((res:any)=>{
    tableData.value = res.data.result.records
    total.value = res.data.result.total
    page.value = res.data.result.current
  })
}

function searchData(){
  page.value = 0
  getData()
}

function tableSelect(n:number){
  limit.value = n
  searchData()
}

function chagePage(n: number){
  page.value = n - 1
  getData()
}
</script>

<style lang="scss" scoped>
.container{
  width:100%;
  height:100%;

  background-color: white;
}
</style>
